<template>
  <div class="inputAddress">
    <div class="cell">
      <input type="text" name @input="getCity" id v-model="innerValue" placeholder="请输入地址" />
      <!-- <input type="text" @input="getCity" class="address" placeholder="请输入地址"> -->
    </div>

    <div class="cell cellRight">
      <label class="clearLabel" @click="clear">清空当前信息（{{poiList.length}}）</label>
    </div>
    <div class="poiList">
      <div
        class="item"
        v-for="(item,index) in poiList"
        v-bind:key="index"
        @click="chooseAddress(item.address)"
      >

        <div class="itemInfo" style="display:flex;align-items:center;"><img style="width:17px;height:17px;margin-right:5px;" src="@/assets/img/search.png" alt="">{{item.address}}</div>
        <div class="citys">{{item.provinceName}}，{{item.cityName}}，{{item.areaName}}</div>
      </div>
    </div>
    <div class="footer">
      <div class="btn-wrap">
        <div class="btn-left" @click="cancelOrder">
          <span>取消</span>
        </div>
        <div class="btn-right" @click="confirmOrder">
          <span>确认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getAddressByKeywords } from '@/api/auth.js'
import Vue from "vue";
export default {
  data() {
    return {
      poiList: [],
      pickParams: {},
      innerValue: "",
      cityCode: ""

    };
  },
  mounted() {
    if (this.$router.history.current.query.flag == 1) {
        this.innerValue = JSON.parse(sessionStorage.getItem('deliverClick')).KaUabDes
        this.cityCode = this.isCode('deliverClick')
      } else if(this.$router.history.current.query.flag == 2) {
        this.innerValue = JSON.parse(sessionStorage.getItem('receivingClick')).KaUabDes
        this.cityCode = this.isCode('receivingClick')
      } else if(this.$router.history.current.query.flag == 3){
        this.innerValue = JSON.parse(sessionStorage.getItem('stopOverList'))[this.$router.history.current.query.ind].shrpDes
        this.cityCode = this.isCode('stopListClick')
      }
      this.getmountedcity(this.innerValue, this.cityCode)
  },
  methods: {
    isCode(name){
      if(name == 'stopListClick'){
        if(JSON.parse(sessionStorage.getItem(name)).shrpAreaName){
          return  JSON.parse(sessionStorage.getItem(name)).shrpAreaCode
        } else if(JSON.parse(sessionStorage.getItem(name)).shrpCityName){
          return JSON.parse(sessionStorage.getItem(name)).shrpCityCode
        } else if(JSON.parse(sessionStorage.getItem(name)).shrpProvinceName){
          return JSON.parse(sessionStorage.getItem(name)).shrpProvinceCode
        }
      }else{
        if(JSON.parse(sessionStorage.getItem(name)).AREANAME){
          return  JSON.parse(sessionStorage.getItem(name)).KaUabArea
        } else if(JSON.parse(sessionStorage.getItem(name)).CITYNAME){
          return JSON.parse(sessionStorage.getItem(name)).KaUabCity
        } else if(JSON.parse(sessionStorage.getItem(name)).PROVINCENAME){
          return JSON.parse(sessionStorage.getItem(name)).KaUabProvince
        }
      }
        
    },
    getmountedcity(val,code) {
        this.innerValue = val
        if(this.$router.history.current.query.flag == 1){

        }
        getAddressByKeywords({
          city: code,
          keywords: this.innerValue
        }).then((res)=>{
          this.poiList = res.data;
        })
      // axios
      //   .get(
      //     `https://restapi.amap.com/v3/place/text?keywords=${this.innerValue}&city=&key=${'4b50a7a5078dde23342eb66dbbe91aec'}&extensions=all`
      //   )
      //   .then(res => {
      //     console.log(res);
      //     let poiList = res.data.pois.map(item => {
      //       const {
      //         address,
      //         adcode,
      //         pname,
      //         cityname,
      //         adname,
      //         location,
      //         name,
      //         citycode,
      //         pcode
      //       } = item;
      //       const obj = {
      //         address,
      //         adcode,
      //         pname,
      //         cityname,
      //         adname,
      //         location,
      //         name
      //       };

      //       obj.longitude = obj.location.split(",")[0];
      //       obj.latitude = obj.location.split(",")[1];
      //       obj.address = obj.address + obj.name;
      //       obj.citycode = item.adcode.substring(0, 4) + "00000000";
      //       obj.pcode = item.pcode + "000000";
      //       obj.adcode = item.adcode + "000000";
      //       return obj;
      //     });

      //     this.poiList = poiList;
      //     console.log(poiList);
      //   });
    },
    getCity(e) {
      this.innerValue = e.target.value;
        getAddressByKeywords({
          city: this.cityCode,
          keywords: this.innerValue
        }).then((res)=>{
          
          this.poiList = res.data;
        })
    },
    clear() {
      this.innerValue = "";
    },
    //选择地址
    chooseAddress(item) {
      console.log();
      // this.chooseItem = this.poiList[index];
      // this.innerValue =
      //   this.chooseItem.pname +
      //   this.chooseItem.cityname +
      //   this.chooseItem.adname +
      //   this.chooseItem.address;
      this.innerValue = item
      this.poiList = [];
    },
    cancelOrder() {
      this.$router.back();
    },
    confirmOrder() {
      console.log(this.chooseItem);
      // let item = this.chooseItem;

      // let propText = this.pickParams.deliveryFlag==0?"loadAddress":"unloadAddress";

      // this.pickParams.areaId = item.adcode;
      // this.pickParams.areaName = item.pname+item.cityname+item.adname;
      // this.pickParams[propText] = item.pname+item.cityname+item.adname+item.address;
      // this.pickParams.goodsX = item.longitude;
      // this.pickParams.goodsY = item.latitude;
      if (this.$router.history.current.query.flag == 1) {
        if (this.chooseItem == undefined) {
          sessionStorage.setItem("FAddressVal", this.innerValue);
          sessionStorage.removeItem("FAddress");
        } else {
          sessionStorage.setItem("FAddress", JSON.stringify(this.chooseItem));
          sessionStorage.removeItem("FAddressVal");
        }
      } else if(this.$router.history.current.query.flag == 3){
        let obj = JSON.parse(sessionStorage.getItem('stopOverList'))
        let stopListClick = JSON.parse(sessionStorage.getItem('stopListClick'))
        stopListClick.shrpDes = this.innerValue
        sessionStorage.setItem('stopListClick', JSON.stringify(stopListClick))
        obj[this.$router.history.current.query.ind].shrpDes = this.innerValue
         sessionStorage.setItem('stopOverList', JSON.stringify(obj))
      } else {
        if (this.chooseItem == undefined) {
          sessionStorage.setItem("SAddressVal", this.innerValue);
          sessionStorage.removeItem("SAddress");
        } else {
          sessionStorage.setItem("SAddress", JSON.stringify(this.chooseItem));
          sessionStorage.removeItem("SAddressVal");
        }
      }
      // this.$router.push({
      //     path: '/addPickUpOrder',
      //     query: {}
      // });
      this.$router.back();
    }
  }
};
</script>
<style lang="scss">
.inputAddress {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}
.cell {
  background: #fff;
  padding: 15px;
  font-size: 14px;
  border-top: 1px solid #e5e5e5;
}
.cell input {
  border: 0;
  font-size: 15px;
  background: none;
  width: 100%;
}
.cellRight {
  text-align: right;
}
.clearLabel {
  color: #f18d00;
}
.poiList {
  background: #fff;
  margin-top: 10px;
  height: 500px;
  overflow: scroll;
}
.item {
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
}
.citys {
  color: #999;
  font-size: 12px;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fff;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
    .btn-error {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #ff6540;
      border: 1px solid #ff6540;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}

</style>